<template>
  <nut-dialog v-model:visible="state.showPop" :title="state.currentGood.name" :z-index="9" no-footer  custom-class="pop">
    <nut-form label-position="right">
      <nut-form-item label-width="60px" label="数量" required :rules="[{ required: true, message: '请填写数量' }]">
        <nut-input-number v-model="state.qty" :button-size="25" input-width="80px"  />
      </nut-form-item>
      <nut-form-item label-width="60px"  label="单价">
        <nut-input-number v-model="state.price" :min="0" :step="0.1" :decimal-places="2" :button-size="25" input-width="80px"  />
      </nut-form-item>
      <nut-form-item label-width="60px"  label="返利">
        <nut-input-number v-model="state.deduction" :min="0" :step="0.1" :decimal-places="2" :button-size="25" input-width="80px"  />
      </nut-form-item>
      <nut-form-item label-width="60px"  label="单位" required :rules="[{ required: true, message: '请选择单位' }]">
        <nut-radio-group v-model="state.unit" direction="horizontal">
          <nut-radio :label="it" shape="button" v-for="(it,index) in units" :key="index">{{ it }}</nut-radio>
        </nut-radio-group>
      </nut-form-item>
      <nut-form-item  label-width="60px" label="备注">
        <nut-input v-model="state.remark" placeholder="请输入备注" />
      </nut-form-item>
    </nut-form>
    <div style="display: flex;flex-wrap: wrap;">
      <div :class="['sendItem', state.send===it.text?'active':'']" v-for="(it,ind) in state.sendList" :key="ind" @click="choseSend(it)">{{it.text}}</div>
    </div>
    <div style="width:200px;margin: 0 auto;">
      <nut-button  @click="onSubmit" v-if="!state.isAlt">
        <span>加入购物车</span>
        <span style="font-size: 14px;font-weight: 500;color: #c45656;margin-left:20px; "><nut-price :price="subAmount"></nut-price></span>
      </nut-button>
      <nut-button round block @click="altGood"  native-type="submit" v-if="state.isAlt">
        确定修改（<span style="font-size: 14px;font-weight: 500;color: #c45656;"><nut-price :price="subAmount"></nut-price></span>）
      </nut-button>
    </div>
  </nut-dialog>
</template>
<script setup>
import tool from "@/utils/tool";
import {useGlobal} from "@/stores/useGlobal";
import {computed, onBeforeMount, reactive} from "vue";
const global = useGlobal()
const props = defineProps({
  buId: {type: [Number, String], default: 0},
  buName: {type: [Number, String], default: ''},
  top: {type: [Number, String], default: '70px'},
  saveToCart: {type: Boolean, default: true},
})
const state = reactive({
  showPop: false,
  currentGood: {},
  deduction: '',
  qty: '',
  price: '',
  unit: '',
  remark: '',
  send: '',
  sendList: [],
  isAlt: false,
  altIndex: -1,
  infos: []
})
const emit = defineEmits(['addSuc', 'altSuc'])
const subAmount = computed(() => {
  return tool.xe.toFixed(tool.xe.multiply(state.qty, (tool.xe.subtract(state.price,state.deduction))), 2)
})
const amount = computed(() => {
  return tool.xe.toFixed(tool.xe.sum(state.infos, 'amount'), 2)
})
const height = computed(() => {
  return window.innerHeight - 130
})
const units = computed(() => {
  if(!tool.xe.isEmpty(state.currentGood)) {
    let ret = []
    if(state.currentGood.unit1) {
      ret.push(state.currentGood.unit1)
    }
    if(state.currentGood.unit2) {
      ret.push(state.currentGood.unit2)
    }
    return ret
  }
  return []
})

onBeforeMount(() => {
  getSendList()
})

const getSendList = () => {
  tool.post('app/sendList').then(ret => {
    state.sendList = ret.data
  })
}
const altData = (good) => {
  state.isAlt = true
  state.currentGood = good
  state.unit = good.unit
  state.qty = good.qty
  state.price = good.price
  state.deduction = good.deduction
  state.send = good.send
  state.remark = good.remark
  state.infos = []
  state.showPop = true
}
const openDia = (good) => {
  state.currentGood = good
  state.unit = good.unit1
  state.qty = good.qty?good.qty:1
  state.price = good.price?good.price: null
  state.deduction = good.deduction?good.deduction: null
  state.send = null
  state.remark = null
  state.infos = []
  state.showPop = true
}
const onSubmit = () => {
  let qty = tool.xe.toNumber(state.qty)
  if(qty > 0) {
    let cart = {
      invId: state.currentGood.id,
      buId: props.buId,
      invName: state.currentGood.name,
      qty: state.qty,
      price: state.price,
      calNum: state.unit === state.currentGood.unit1?state.currentGood.spec: 1,
      spec: state.currentGood.spec,
      send: state.send,
      deduction: state.deduction,
      unit: state.unit,
      unit1: state.currentGood.unit1,
      unit2: state.currentGood.unit2,
      amount: subAmount.value,
      remark: state.remark
    }
    if(props.saveToCart) {
      tool.post('app/saveCart', {cart}).then(ret => {
        if(ret.stat) {
          emit('addSuc')
          state.showPop = false
        }
      })
    }
    else {
      emit('addSuc')
      state.showPop = false
    }
  }
  else {
    tool.warning('数量不正确')
  }
}
const altGood = () => {
  let qty = tool.xe.toNumber(state.qty)
  if(qty > 0) {
    let cart = {
      cartId: state.currentGood.id,
      invId: state.currentGood.invId,
      buId: state.currentGood.buId,
      invName: state.currentGood.name,
      qty: state.qty,
      price: state.price,
      calNum: state.unit === state.currentGood.unit1?state.currentGood.spec: 1,
      spec: state.currentGood.spec,
      send: state.send,
      deduction: state.deduction,
      unit: state.unit,
      unit1: state.currentGood.unit1,
      unit2: state.currentGood.unit2,
      amount: subAmount.value,
      remark: state.remark
    }
    if(props.saveToCart) {
      tool.post('app/altCart', {cart}).then(ret => {
        if(ret.stat) {
          emit('altSuc', cart)
          state.showPop = false
        }
      })
    }
    else {
      cart.id = state.currentGood.id
      emit('altSuc', cart)
      state.showPop = false
    }
  }
  else {
    tool.warning('数量不正确')
  }
}
const choseSend = (it) => {
  if(state.send === it.text) {
    state.send = ''
  }
  else {
    state.price = null
    state.send = it.text
  }
}

defineExpose({openDia,altData})
</script>
<style  lang="scss">
.nut-dialog__content {
  max-height: 100vh;
}
.pop {
  width: 90vw;
}
.nut-cell {
  padding: 5px;
}
.sendItem {
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #1e9fff;
  padding: 5px 10px;
  border-radius: 4px;
  &.active {
    background-color:#1e9fff ;
    color: white;
  }

}
</style>